<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>强调和引用</title>
    <style>
        /* 做权限范围内的事情，选择器上做限定 */
        p.info em{
            font-style: normal;
            font-weight: bold;
        }
        .hr{
            width: 100%;
            height: 0;
            /* background-color: rgb(6, 52, 202); */
            border-bottom: 1px dashed darkkhaki;
        }
    </style>
</head>
<body>
<!-- 
    em strong都表示强调
        em 默认时斜体，strong 默认时粗体。
        使用时着重考虑语义，不需要考虑样式。
        具体如何使用em和strong，遵循企业的使用规范。如果没有明确规定，可以相机使用。
    引用
        q cite blockquote mark
        q 默认样式加引号。
        cite 默认样式变斜体。
        mark 默认样式文字背景。
        blockquote 块引用。
        q cite mark 行内元素。
        blockquote 块元素。 

        具体如何使用引用，遵循企业的使用规范。如果没有明确规定，可以相机使用。
    -->
    <p class="info">
        前端开发中<em>HTML</em>表示内容，CSS表示<strong>样式</strong>。
    </p>
    <p>
        <q>世上本无路，走的人多了就有了路。</q>——鲁迅。
        <cite>世上本无路，走的人多了就有了路。</cite>
        <mark>世上本无路，走的人多了就有了路。</mark>
        <blockquote>
            世上本无路，走的人多了就有了路。
        </blockquote>
    </p>
    <!-- 保留格式输出。很多时候配合code标签表示代码。 -->
    <pre>
        你好。
    </pre>
    <p>             你好。</p>
    <p>你好。</p>
    <!-- 商用网页很少使用。 -->
    <hr> <br> <wbr>
    <div class="hr"></div>
</body>
</html>